<!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Dawn_Lottery</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 3.3.4 -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- DataTables -->
    <link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.12/css/jquery.dataTables.min.css">
    <!-- Theme style -->
    <link href="${request.contextPath}/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link href="${request.contextPath}/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="${request.contextPath}/css/head.css" rel="stylesheet" type="text/css" />


    <link href="//cdn.bootcss.com/bootstrap-select/1.9.4/css/bootstrap-select.min.css" rel="stylesheet">

  </head>
  <body class="skin-blue sidebar-mini">

  <div class="pageLoading"></div>
  <div class="ajaxLoading"></div>

      <header class="main-header">

        <!-- Logo -->
        <a href="#" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>L</b></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>S</b>hiro</span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
               <li class="dropdown messages-menu">
               </li>
               <li class="dropdown messages-menu">
               </li>
               <li>
              </li>
              
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="${request.contextPath}/images/user.jpg" class="user-image" alt="User Image"/>
                  <span class="hidden-xs">破晓</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="${request.contextPath}/images/user.jpg" class="img-circle" alt="User Image" />
                    <p>shiro - Web Developer
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                   <!-- <div class="col-xs-4 text-center">
                      <a href="#">Followers</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Sales</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Friends</a>
                    </div> -->
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">

                    <div class="pull-right">
                      <a href="${request.contextPath}/signOut" class="btn btn-default btn-flat">注销</a>
                    </div>
                  </li>
                </ul>
              </li>

            </ul>
            
          </div>
        </nav>
      </header>
      
      
      
      <!-- 左侧导航栏  包括了搜索，头像，菜单 -->
      <aside class="main-sidebar">
      
      
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="${request.contextPath}/images/user.jpg" class="img-circle" style="height:auto" alt="User Image" />
            </div>
            <div class="pull-left info" style="padding:15px 2px 2px 37px!important;">
              <p>用户头像</p>
              <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
          </div>
          
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
            <li class="header">主菜单</li>

              <li class="treeview" id="childMenu1" style="display: none" >
                  <a href="#">
                      <i class="fa fa-users" aria-hidden="true"></i>
                      <span>菜单1</span>
                  </a>
              </li>
              <li class="treeview" id="childMenu2" style="display: none" >
                  <a href="#">
                      <i class="fa fa-users" aria-hidden="true"></i>
                      <span>菜单2</span>
                  </a>
              </li>
              <li class="treeview" id="childMenu3" style="display: none" >
                  <a href="#">
                      <i class="fa fa-users" aria-hidden="true"></i>
                      <span>系统管理</span>
                  </a>
              </li>
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>
 
    <!-- jQuery 2.1.4 -->
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="${request.contextPath}/dist/js/app.js" type="text/javascript"></script>

    <!-- DataTables -->
    <script type="text/javascript" src="//cdn.bootcss.com/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>


  </body>
</html>
<script>
    $(function () {


        $(".treeview").click(function(){

            setCookie('chooseMenuId', $(this).attr("id"));

        });

        $.getJSON('${request.contextPath}/permission/getMenu', function (data) {
            //此处返回的data已经是json对象
            //以下其他操作同第一种情况

            console.log(data);
            $.each(data, function (i, item) {


                var children = item.children;
                var id = item.id;
                $("#childMenu"+id).css("display","block");

                var ulHtml = '<ul class="treeview-menu">';

                $.each(children,function(i,child){

                    var url  = "${request.contextPath}"+child.url;
                    ulHtml+="<li><a href='"+url+"' ><i class='fa fa-circle-o'></i>"+child.name+"</a></li>";

                });

                ulHtml+='</ul>';



                $("#childMenu"+id).append(ulHtml);

            });

            $(".sidebar-menu .treeview").each(function(i,item){

                    if(!$(item).is(':has(ul)')){

                        $(item).remove();
                    }


            });

            var preChooseMenuId = getCookie('chooseMenuId');
            $("#"+preChooseMenuId).find("ul:eq(0)").css("display","block");

        });//end getJson


        var maxDepth = 2;
        var loadChildren = function(node, level) {
            var hasChildren = node.level < maxDepth;
            for (var i=0; i<8; i++) {
                var id = node.id + (i+1).toString();
                node.children.push({
                    id:id,
                    title:'Node ' + id,
                    has_children:hasChildren,
                    level: node.level + 1,
                    children:[]
                });
                if (hasChildren && level < 2) {
                    loadChildren(node.children[i], (level+1));
                }
            }
            return node;
        };



        $(window).load(function() {
            // Animate loader off screen
            $(".pageLoading").fadeOut(1000);
        });


        function setCookie(name,value){
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
        }

        function getCookie(name) {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null)
                document.cookie= name + "="+cval+";expires="+exp.toGMTString();
        }


    });

</script>